import React, { useRef, useEffect } from 'react';
import PropTypes from 'prop-types';
import Scroll from '../../baseUI/scroll';
import { List, ListItem } from '../horizen-item/style';


function Horizen(props) {
    // 我们想从props中获得什么参数？
    const {list, oldVal, title } = props;
    const { handleClick } = props;

    // 加入声明
    const Category = useRef(null);

    // 加入初始化内容宽度的逻辑
    useEffect(() => {
        let categoryDOM = Category.current;
        let tagElems = categoryDOM.querySelectorAll('span');
        let totalWidth = 0;
        Array.from(tagElems).forEach(ele => {
            totalWidth += ele.offsetWidth;
        });
        categoryDOM.style.width = `${totalWidth}px`;
    }, []);
    
    // JSX 在Scroll下面，对第一个 div 赋予 ref
    return (
        // @ts-ignore
        <Scroll direction={"horizental"}>
            <div ref={Category}>
                <List>
                    <span>{title}</span>
                    {
                        list.map(item => {
                            return (
                                <ListItem   
                                    key={item.key}
                                    className={oldVal === item.key ? 'selected' : ''}
                                    onClick={() => handleClick(item.key)}
                                >
                                    {item.name}
                                </ListItem>
                            )
                        })
                    }
                </List>
            </div>
        </Scroll>
    )
};


// 考虑接受的参数
// list 接受的列表数据
// oldVal 当前列表的item值
// title 列表左边的标题
// handleClick 点击不同的item执行的方法
Horizen.propProps = {
    list: [],
    oldVal: '',
    title: '',
    handleClick: null,
};

Horizen.propTypes = {
    list: PropTypes.array,
    oldVal: PropTypes.string,
    title: PropTypes.string,
    handleClick: PropTypes.func,
};

export default React.memo(Horizen);
